import { View, Image, ScrollView, Button } from "@tarojs/components"
import Taro from '@tarojs/taro'
import { AtIcon, AtFloatLayout } from 'taro-ui'
import NavBar from "../../components/topbar/topbar";
import { useEffect, useState } from "react";
import { Current } from '@tarojs/runtime';
import Collection from "../../components/collection/collection";
//import left from "./image/left.png";
//import line from "../todayPush/image/line.png";
import WeChat from "../todayPush/image/WeChat.png";
import shareCard from "../todayPush/image/shareCard.png";
/* import yun1 from "./image/yun1.png";
import yun2 from "./image/yun2.png";
import yun3 from "./image/yun3.png";
import yun4 from "./image/yun4.png"; */
import './details.scss'
function details() {

    const [isOpen, setOpen] = useState(false)
    const [isRight, setRight] = useState(true)
    const [recommendedList, setRecommendedList] = useState([{ "recommended_title": null, "recommended_content": null }])

    //   从云数据库中把审核表中的数据进行提取
    useEffect(() => {
        Taro.showLoading({
            title: '请销等',
            mask: true,
        })
        let data = JSON.parse(decodeURIComponent(Current.router.params.value1))
        setRecommendedList([data])
        setTimeout(
            function handleClick() {
                Taro.hideLoading()
            }, 1000)

    }, [])
    // const len = Math.round(Math.random() * (recommendedList.length - 1))
    /*const handleClick = () => {
        Taro.navigateTo({
            url: '/pages/todayPush/todayPush'
        })
    } */
    const toBack = () => {
        Taro.navigateBack().then()
    }
    const handleClick1 = () => {
        Taro.navigateTo({
            url: '/pages/todayPush/todayPush'
        })
    }
    const handleClick2 = () => {
        Taro.navigateTo({
            url: '/pages/todayPush/todayPush'
        })
    }
    const handleClick3 = () => {
        Taro.navigateTo({
            url: '/pages/todayPush/todayPush'
        })
    }
    const handleClick4 = () => {
        Taro.navigateTo({
            url: '/pages/todayPush/todayPush'
        })
    }
    /* const handleClick5 = () => {
        Taro.pageScrollTo({
            scrollTop: 500,
            duration: 300
        })
    } */
    const handleClick6 = () => {
        Taro.navigateTo({
            url: '/pages/shareCard/shareCard'
        })
    }
    const test = () => {
        console.log('滚动触发')
    }
    const changeOpen = () => {
        setOpen(true)
    }
    const changeRight = () => {
        setRight(!isRight)
    }

    return (
        <View>
            <ScrollView onScroll={test} scrollY className="index" style={'background-image: url('+recommendedList[0].picture+')'}>
                <NavBar title="详情" back nback={toBack} />
                <View className="box">
                    {/* <Image className="line" src={line} onClick={handleClick5} /> */}
                    <View className="boxTitle">
                        <View className="boxTxt">
                            {/* 怀孕第一周 */}
                            {
                                recommendedList[0].recommended_title
                            }
                        </View>
                        {/* <View onClick={() => { changeRight() }}>
                            {isRight ? (
                                <AtIcon className="star" value='star-2' size='20' color='#000' />
                            ) : (
                                <AtIcon className="star" value='star-2' size='20' color='#cb4047' />
                            )}
                        </View> */}
                        {/* 五角星收藏事件的组件 */}
                        <Collection data={recommendedList} />

                        <AtIcon onClick={() => changeOpen()} className="share" value='share' size='20' color='#000' />
                        <AtFloatLayout isOpened={isOpen} >
                            <View className="sharebox">
                                <Button className="sFriend" openType="share">
                                    <Image className="WeChat" src={WeChat} />
                                    <View className="WeChatText">分享给微信好友</View>
                                </Button>
                                <Button className="sCard" onClick={handleClick6}>
                                    <Image className="shareCard" src={shareCard} />
                                    <View className="WeChatText">生成分享卡</View>
                                </Button>
                            </View>
                            <Button className="cancel" onClick={() => setOpen(false)}>取消</Button>
                        </AtFloatLayout>
                    </View>
                    <View className="boxContent">
                        <View className="contentTex">描述</View>
                        <View className="contentTex2">
                            {/* 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 */}
                            {
                                recommendedList[0].recommended_content
                            }
                        </View>
                        <View className="pbox">提供者:sdfdf</View>
                        {/* <View className="contentTex3">相关推荐</View>
                        <View className="ContentPic">
                            <View>
                                <Image className="yun" src={yun1} onClick={handleClick1} />
                                <View className="yunText" onClick={handleClick1}>怀孕第一月</View>
                            </View>
                            <View>
                                <Image className="yun" src={yun2} onClick={handleClick2} />
                                <View className="yunText" onClick={handleClick2}>怀孕第二月</View>
                            </View>
                            <View>
                                <Image className="yun" src={yun3} onClick={handleClick3} />
                                <View className="yunText" onClick={handleClick3}>怀孕第三月</View>
                            </View>
                            <View>
                                <Image className="yun" src={yun4} onClick={handleClick4} />
                                <View className="yunText" onClick={handleClick4}>怀孕第四月</View>
                            </View>
                        </View> */}
                    </View>
                </View>
            </ScrollView>
        </View>
    )
}
export default details
